<template>
	<view class="service-box" v-show="backRepairShow" :class="repairAddClass ? 'on':''" catchtouchmove='true'>
		<view class="drawer" @touchmove.prevent></view>
		<view class="modal-box">
			<text>{{title}}</text>
			<input type="text" v-model="conent" :placeholder='placeholder' />
			<view class="but-style">
				<view @click="onCancel">取消</view>
				<view class="confirm-color" @click="onConfirm">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "inputModal",
		props: {
			backRepairShow: {
				type: Boolean,
				default: false
			},
			repairAddClass: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ''
			},
			placeholder:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				conent: '',
			};
		},
		methods: {
			/**
			 * 取消
			 */
			onCancel() {
				this.$emit('closeModal', false)
				this.conent = ''
			},
			/**
			 * 确认
			 */
			onConfirm() {
				this.$emit('onConfirm', this.conent)
				this.conent = ''
			}
		}
	}
</script>

<style lang="scss">
	.service-box {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all .25s ease-in-out 0s;
		opacity: 0;
		transform: scale(1.2);

		.drawer {
			width: 100%;
			height: 100%;
			position: absolute;
			background-color: rgba(0, 0, 0, 0.6);
			z-index: 2;

		}

		.modal-box {
			padding-top: 48rpx;
			width: 600rpx;
			border-radius: 16rpx;
			background-color: #fff;
			z-index: 4;

			text {
				display: block;
				font-weight: 500;
				text-align: center;
				color: #303133;
			}

			input {
				padding: 48rpx;
				font-size: 30rpx;
				// text-align: center;
				color: #606266;
				display: block;
				box-shadow: 0 2rpx 2rpx #F8F8F8;
			}

			.but-style {
				display: flex;
				view {
					flex: 1;
					height: 100rpx;
					line-height: 100rpx;
					font-size: 32rpx;
					text-align: center;
					color: #606266;
				}

				.confirm-color {
					color: #1585FC;
				}
			}
		}
	}

	.service-box.on {
		opacity: 1;
		transform: scale(1, 1);
	}
</style>
